// 创建 pdf.js
// 引入依赖
import Vue from 'vue'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'

const PDF = {}
PDF.install = function (Vue, options) {
  /**
   * targetDom: 需要打印的dom对象
   * name:pdf的名字
   * callback: 回调函数
   */
  Vue.prototype.$createPdf = function (targetDom, name, callback) {
    let cloneDom = targetDom.cloneNode(true)
    cloneDom.style.width = targetDom.scrollWidth + 'px'
    cloneDom.style.height = targetDom.scrollHeight + 'px'
    cloneDom.style.background = '#FFFFFF'
    cloneDom.style.position='absolute'
    cloneDom.style.zIndex='-2'

    let tx=document.createTextNode('生成PDF中..')
    let divDom=document.createElement("div")
               
    let span=document.createElement('span')
    span.appendChild(tx)

    let className=document.createAttribute('class')
    className.value='layer'
    
    divDom.setAttributeNode(className)
    divDom.appendChild(span)

    document.body.appendChild(cloneDom)
    document.body.appendChild(divDom)
    
    html2canvas(cloneDom, {
      scale: 2, // 提升画面质量，但是会增加文件大小
      allowTaint: true,
      useCORS: true, // 允许跨域图片 当图片是链接地址时，需加该属性，否组无法显示图片
      imageTimeout: 0, // 图片加载延迟，默认延迟为0，单位毫秒
      height: targetDom.scrollHeight, // canvas的高度设定
      width: targetDom.scrollWidth, // canvas的宽度设定
      dpi: window.devicePixelRatio *2, // 将分辨率提高到特定的DPI
    }).then(canvas => {
    
      document.body.removeChild(cloneDom)
      document.body.removeChild(divDom)
      // a4纸的尺寸[592.28,841.89]
      const A4_WIDTH = 592.28
      const A4_HEIGHT = 841.89
      let contentWidth = canvas.width
      let contentHeight = canvas.height
      let pageData = canvas.toDataURL('image/jpeg', 1)
      // 一页pdf html页面生成的canvas高度;
      let pageHeight = contentWidth / A4_WIDTH * A4_HEIGHT
      console.log(contentHeight,'contentHeight')
      console.log(pageHeight,'pageHeight')
      // 未生成pdf的html页面高度
      let leftHeight = contentHeight
      // 页面偏移
      let position = 0
      // a4纸的尺寸[592.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      let imgWidth = A4_WIDTH
      let imgHeight = A4_WIDTH / contentWidth * contentHeight
      // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
      let pdf = new JsPDF('', 'pt', 'a4')
      // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度
      // 当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        console.log(1)
        console.log(leftHeight,'leftHeight')
        console.log(imgHeight,'imgHeight')
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
      } else {
        console.log(2)
        console.log(imgWidth,'imgWidth')
        console.log(imgHeight,'imgHeight')
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight+200)
          leftHeight -= pageHeight
          position -= A4_HEIGHT
          // 避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage()
          }
        }
      }
      // 直接下载
       pdf.save(name + '.pdf') 
      // base64转成文件
      // let buffer = pdf.output('datauristring')
      // let myfile = dataURLtoFile(buffer, name)
      // callback(myfile)
    })
  }
}


Vue.use(PDF)
export default PDF